{% load static %}
<!DOCTYPE html>
<html>
<head>
    <title>投票结果</title>
    <link rel="stylesheet" href="{% static 'polls/style.css' %}">
    <style>
.progress-container {
    width: 200px;
    height: 14px;
    background-color: #f0f0f0;
    border-radius: 7px;
    overflow: hidden;
    margin-left: 15px;
}

.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--secondary-color), #64B5F6);
    transition: width 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* 改进投票结果样式 */
.vote-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #eee;
}

.choice-text {
    flex-grow: 1;
    margin-right: 20px;
    font-size: 16px;
    color: #333;
}

/* 票数显示样式 */
.vote-count {
    min-width: 50px;
    text-align: right;
    color: #666;
    font-weight: 500;
}
    </style>
</head>
<body>
    <div class="container">
        <div class="poll-card">
            <div class="poll-header">
                <h1 class="result-title">{{ question.question_text }}</h1>
            </div>

            <!-- 新增投票结果列表 -->
            {% for choice in question.choice_set.all %}
            <div class="vote-info">
                <!-- 选项文本 -->
                <span class="choice-text">{{ choice.choice_text }}</span>
                
                <!-- 票数与进度条 -->
                <div>
                    <span>{{ choice.votes }}票</span>
                    {% if question.total_votes > 0 %}
                        <!-- 计算百分比并渲染进度条 -->
                        {% widthratio choice.votes question.total_votes 100 as percentage %}
                        <div class="progress-container">
                            <div class="progress-bar" style="width: {{ percentage }}%"></div>
                        </div>
                    {% endif %}
                </div>
            </div>
            {% endfor %}

            <!-- 操作按钮（保持原有样式） -->
            <div class="form-actions">
                <a href="{% url 'polls:detail' question.id %}" class="submit-btn">再次投票</a>
                <a href="{% url 'polls:index' %}" class="back-btn">返回列表</a>
            </div>
        </div>
    </div>
</body>
</html>